<template>
  <div class="notification-detail-container">
    <!-- 返回按钮 -->
    <div class="detail-header">
      <button class="back-btn" @click="goBack">
        <i class="fa fa-arrow-left"></i>
        返回消息列表
      </button>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>正在加载消息详情...</p>
    </div>

    <!-- 消息详情 -->
    <div v-else-if="notification" class="detail-content">
      <!-- 消息头部 -->
      <div class="message-header">
        <div class="message-icon">
          <svg-icon :icon-class="getIconClass(notification.notificationType)" />
        </div>
        <div class="message-info">
          <h2 class="message-title">{{ notification.title }}</h2>
          <div class="message-meta">
            <span class="message-time">{{
              formatTime(notification.createdAt)
            }}</span>
            <span :class="['message-status', { unread: !notification.isRead }]">
              {{ notification.isRead ? "已读" : "未读" }}
            </span>
          </div>
        </div>
      </div>

      <!-- 消息内容 -->
      <div class="message-body">
        <div class="message-content">
          <p>{{ notification.message }}</p>
        </div>
      </div>

      <!-- 消息操作 -->
      <div class="message-actions">
        <button
          v-if="!notification.isRead"
          class="action-btn mark-read-btn"
          @click="markAsRead"
        >
          <i class="fa fa-check"></i>
          标记为已读
        </button>
        <button class="action-btn delete-btn" @click="deleteMessage">
          <i class="fa fa-trash"></i>
          删除消息
        </button>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else class="error-container">
      <div class="error-icon">
        <i class="fa fa-exclamation-circle"></i>
      </div>
      <h3>消息不存在</h3>
      <p>该消息可能已被删除或不存在</p>
      <button class="back-btn" @click="goBack">返回消息列表</button>
    </div>
  </div>
</template>

<script>
import {
  getNotificationDetail,
  markNotificationRead,
  deleteNotification,
} from "@/api/notification";
import { getUser } from "@/utils/storage";

export default {
  name: "NotificationDetail",
  data() {
    return {
      notification: null,
      loading: true,
      userId: null,
    };
  },
  created() {
    const user = getUser();
    this.userId = user.userId;
    this.loadNotificationDetail();
  },
  methods: {
    // 加载消息详情
    async loadNotificationDetail() {
      const userNotificationId = this.$route.params.id;
      if (!userNotificationId) {
        this.loading = false;
        return;
      }

      try {
        const response = await getNotificationDetail({
          userId: this.userId,
          userNotificationId: userNotificationId,
        });

        if (response.success && response.result) {
          this.notification = response.result;
        }
      } catch (error) {
        console.error("加载消息详情失败:", error);
        this.$message && this.$message.error("加载消息详情失败");
      } finally {
        this.loading = false;
      }
    },

    // 获取图标样式
    getIconClass(type) {
      const icons = {
        1: "example", // 一般信息
        2: "schedule", // 进度提醒
        3: "verify", // 预警
      };
      return icons[type] || "example";
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return "";
      return new Date(time).toLocaleString("zh-CN");
    },

    // 标记为已读
    async markAsRead() {
      if (!this.notification || this.notification.isRead) return;

      try {
        const response = await markNotificationRead({
          userId: this.userId,
          userNotificationId: this.notification.userNotificationId,
        });

        if (response.success) {
          this.notification.isRead = 1;
          this.notification.readAt = new Date().toISOString();
          this.$message && this.$message.success("已标记为已读");
        }
      } catch (error) {
        console.error("标记已读失败:", error);
        this.$message && this.$message.error("标记已读失败");
      }
    },

    // 删除消息
    async deleteMessage() {
      if (!this.notification) return;

      if (confirm("确定要删除这条消息吗？")) {
        try {
          const response = await deleteNotification({
            userId: this.userId,
            userNotificationId: this.notification.userNotificationId,
          });

          if (response.success) {
            this.$message && this.$message.success("删除成功");
            this.goBack();
          }
        } catch (error) {
          console.error("删除失败:", error);
          this.$message && this.$message.error("删除失败");
        }
      }
    },

    // 返回消息列表
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.notification-detail-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.detail-header {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.back-btn {
  background-color: #f0f0f0;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #555;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-btn:hover {
  background-color: #e0e0e0;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #999;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1e88e5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.message-icon {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.message-icon .svg-icon {
  width: 30px;
  height: 30px;
  color: #555;
}

.message-info {
  flex-grow: 1;
}

.message-title {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
}

.message-time {
  color: #666;
}

.message-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  background-color: #e8f5e8;
  color: #4caf50;
}

.message-status.unread {
  background-color: #fff3e0;
  color: #ff9800;
}

.message-body {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}

.message-content {
  line-height: 1.6;
  color: #333;
  font-size: 16px;
}

.message-content p {
  margin: 0;
}

.message-actions {
  display: flex;
  gap: 15px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.mark-read-btn {
  background-color: #4caf50;
  color: white;
}

.mark-read-btn:hover {
  background-color: #45a049;
}

.delete-btn {
  background-color: #f44336;
  color: white;
}

.delete-btn:hover {
  background-color: #da190b;
}

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #999;
}

.error-icon {
  font-size: 48px;
  color: #ccc;
  margin-bottom: 20px;
}

.error-container h3 {
  margin: 0 0 10px 0;
  color: #666;
}

.error-container p {
  margin: 0 0 20px 0;
}
</style>
